
<template>
  <div class="box">
    <div class="header">
      <div class="info">
        <el-icon><PartlyCloudy /></el-icon>
        <p class="boxDate">{{ weatcherData.tem }}℃</p>
        <p class="boxTime">| {{ dateDay }} |</p>
        <p class="boxDate">{{ dateYear }}</p>
      </div>
      <div class="top-middle">
        <img src="../assets/dataanaly-1.png" style="height: 3rem" />
        <div class="title">AI分析看板</div>
      </div>
      <div class="right">
        <div
          class="exit-button"
          @mouseover="changeColor"
          @mouseout="restoreColor"
          :style="{ cursor: cursorStyle }"
        >
          <p
            :style="{ color: textColor }"
            style="
              margin-top: 0.5rem;
              margin-left: 2rem;
              font-size: 0.9rem;
               
              font-weight: 400;
              line-height: 1rem;
            "
          >
            退出
          </p>
        </div>
      </div>
    </div>
    <div class="AI-body">
      <div class="AI-item">
        <div class="flex-container1">
          <img src="../assets/AI垃圾箱.png" width="40" height="40" />
          <div class="top-title">垃圾分类数据分析</div>
        </div>
        <div class="flex-container2">
          <img src="../assets/AI河道.png" width="40" height="40" />
          <div class="top-title">河道漂浮物数据分析</div>
        </div>
      </div>
      <div class="AI-item">
        <div class="AI-item1">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近三个月预警次数排名</div>
            </div>
          </div>
          <div class="AI-container">
            <div class="AI-cht1">
              <div class="cht-1"></div>
              <div class="cht-2"></div>
              <div class="cht-3"></div>
            </div>
            <div class="cht-ana4">
              <v-chart
                id="chart4"
                ref="chart4"
                class="chart4"
                :option="option4"
              />
            </div>
          </div>
        </div>
        <div class="AI-item2">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近三个月预警次数排名</div>
            </div>
          </div>
          <div class="AI-container">
            <div class="AI-cht1">
              <div class="cht-1"></div>
              <div class="cht-2"></div>
              <div class="cht-3"></div>
            </div>
            <div class="cht-ana2">
              <v-chart
                id="chart2"
                ref="chart2"
                class="chart2"
                :option="option2"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="AI-item">
        <div class="AI-item1-1">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近一年告警总数</div>
            </div>
          </div>
          <div class="AI-container-n">
            <img src="../assets/黄灯泡.png" width="40" height="40" alt="" />
            <div class="AI-number1"><span>123</span></div>
          </div>
        </div>
        <div class="AI-item1-2">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近一年告警次数分布</div>
            </div>
          </div>
        </div>
        <div class="AI-item1-3">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近一年告警总数</div>
            </div>
          </div>
          <div class="AI-container-n">
            <img src="../assets/黄灯泡.png" width="40" height="40" alt="" />
            <div class="AI-number1"><span>123</span></div>
          </div>
        </div>
        <div class="AI-item1-4">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近一年告警次数分布</div>
            </div>
          </div>
        </div>
      </div>
      <div class="AI-item">
        <div class="AI-item1">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近一年告警总数趋势</div>
            </div>
          </div>
          <div class="AI-container">
            <div class="cht3">
              <v-chart id="chart3" class="chart3" :option="option3" />
            </div>
          </div>
        </div>
        <div class="AI-item2">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近一年告警总数趋势</div>
            </div>
          </div>
          <div class="AI-container">
            <div class="cht1">
              <v-chart id="chart12" class="chart12" :option="option12" />
            </div>
          </div>
        </div>
      </div>
      <div class="AI-item">
        <div class="return" @click="backhome"><span>返回</span></div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import axios from "axios";
import router from "@/router";
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
export default {
  data() {
    return {
      data: [
        { value: 100, color: "blue" },
        { value: 150, color: "green" },
        { value: 200, color: "orange" },
      ],
      cursorStyle: "default",
      textColor: "white",
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weatcherData: [],
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      timer: null,
      months: [],
      currentMonth: "",
      option3: {}, // 存储echarts图表的配置项
      option12: {}, // 存储echarts图表的配置项
      a1: {},
      a2: {},
      a3: {},
      r1: {},
    };
  },

  setup() {
    const chart2 = ref(null);
    const option2 = ref(null);
    const chart4 = ref(null);
    const option4 = ref(null);
    async function fetchData() {
      try {
        console.log("222222");
        var gradientColors = [
          ["#EC791400", "#D57117"],
          ["#EC791400", "#D57117"],
          ["#EC791400", "#D57117"],
        ];
        option2.value = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "0%",
            left: "0%",
            right: "4%",
            bottom: "-10%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 30,
              fontSize: 16,
              align: "right",
              color: "#ffffff",
            },
            data: ["陶家浜", "陶家浜2", "陶家浜3"],
          },
          series: [
            {
              name: "2011",
              type: "bar",
              data: [18203, 23489, 29034],
              barWidth: 20,
              label: {
                show: true,
                fontSize: 16,
                color: "#ffffff",
                formatter: function (params) {
                  return params.value + "(" + ")";
                },
                position: "right",
              },
              itemStyle: {
                borderRadius: [0, 10, 10, 0],
                color: function (params) {
                  // 根据条形的索引选择对应的渐变色
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: gradientColors[params.dataIndex][0],
                    },
                    {
                      offset: 1,
                      color: gradientColors[params.dataIndex][1],
                    },
                  ]);
                },
              },
            },
          ],
        };

        option4.value = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "0%",
            left: "0%",
            right: "4%",
            bottom: "-10%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 30,
              fontSize: 16,
              align: "right",
              color: "#ffffff",
            },
            data: ["陶家浜", "陶家浜2", "陶家浜3"],
          },
          series: [
            {
              name: "2011",
              type: "bar",
              data: [18203, 23489, 29034],
              barWidth: 20,
              label: {
                show: true,
                fontSize: 16,
                color: "#ffffff",
                formatter: function (params) {
                  return params.value + "(" + ")";
                },
                position: "right",
              },
              itemStyle: {
                borderRadius: [0, 10, 10, 0],
                color: function (params) {
                  // 根据条形的索引选择对应的渐变色
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: gradientColors[params.dataIndex][0],
                    },
                    {
                      offset: 1,
                      color: gradientColors[params.dataIndex][1],
                    },
                  ]);
                },
              },
            },
          ],
        };
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    }
    // 初始化echarts图表
    function initChart() {
      chart2.value = echarts.init(document.getElementById("chart2"));
      chart4.value = echarts.init(document.getElementById("chart4"));
      console.log("3333");
      watch(
        option2,
        () => {
          chart2.value.setOption(option2.value);
          chart4.value.setOption(option4.value);
        },
        { deep: true }
      );
    }
    onMounted(() => {
      initChart();
      fetchData();
    });
    return {
      option2,
      option4,
    };
  },
  mounted() {
    this.getDataFromAPI();
    this.timer = setInterval(() => {
      const date = dayjs(new Date());
      this.dateDay = date.format("HH:mm:ss");
      this.dateYear = date.format("YYYY年MM月DD日");
      this.dateWeek = date.format(this.weekday[date.day()]);
    }, 1000); //每秒一次
    this.getWeather();
    this.timer = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 60); //每小时调用一次
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    backhome() {
      router.push("/");
    },
    changeColor() {
      this.textColor = "aqua";
      this.cursorStyle = "pointer";
    },
    restoreColor() {
      this.textColor = "aliceblue"; // 还原为原来的颜色
    },
    getWeather() {
      // 第三方天气api接口
      axios
        .get("https://v1.yiketianqi.com/api", {
          params: {
            unescape: "1",
            appid: "43656176",
            appsecret: "I42og6Lm",
            // version: 'v91'
          },
        })
        .then((res) => {
          console.log(res.data.data);
          if (res.data) {
            this.weatcherData = res.data.data[0];
            console.log(this.weatcherData.tem);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMonthName(monthd) {
      const monthNames = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      return monthNames[monthd];
    },
    async getDataFromAPI() {
      console.log("1");
      try {
        const currentDate = new Date();
        const currentMonth = currentDate.getMonth();
        this.currentMonth = currentMonth + 1; // 获取当前月份
        for (let i = 0; i < 12; i++) {
          const monthd = (currentMonth - i + 12) % 12;
          const monthName = this.getMonthName(monthd);
          this.months.push(monthName);
          console.log("a", monthName, this.months);
        }
        const monthArray = Object.values(this.months); //获取最近一年月份
        console.log("b", monthArray);
        let sortedMonths = monthArray.reverse(); //最近一年月份倒叙
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1; // 获取当前月份
        const startOfMonth = new Date(year, month - 1, 1).getTime();
        const endOfMonth = new Date(year, month, 0).getTime();
        //获取长三角的时间数组参数
        const yearMonthArray = [];
        const currentDates = new Date(year, month);
        for (let i = 0; i < 12; i++) {
          currentDates.setMonth(currentDates.getMonth() - 1);
          const year1 = currentDates.getFullYear();
          const month1 = currentDates.getMonth() + 1; // 月份需要加一，因为月份从0开始计数
          yearMonthArray.unshift(
            `${year1}-${month1 < 10 ? "0" + month1 : month1}`
          );
        }
        console.log("aaa", yearMonthArray);
        //获取村内事件的时间数组参数
        let timestampRanges1 = [];
        let timestampRanges2 = [];
        for (let i = 0; i < 12; i++) {
          // 获取每个月份的时间戳范围
          if (month > i) {
            const start = new Date(year, i, 1).getTime();
            const end =
              new Date(year, i + 1, 0).getTime() + 24 * 60 * 60 * 1000 - 1;
            // 将近一年每个月份的时间戳范围添加到数组中
            timestampRanges1.push({ start, end });
          } else {
            const start = new Date(year - 1, i, 1).getTime();
            const end =
              new Date(year - 1, i + 1, 0).getTime() + 24 * 60 * 60 * 1000 - 1;
            // 将近一年每个月份的时间戳范围添加到数组中
            timestampRanges2.push({ start, end });
          }
        }
        // 输出月份时间戳范围数组
        timestampRanges1.unshift(...timestampRanges2);
        console.log("666", timestampRanges1);
        let timestamp1 = [];
        let timestamp2 = [];
        for (let i = 0; i < 12; i++) {
          await axios
            .post("https://punan.hexunetwork.com/xinpanmen/finishrate", {
              start: timestampRanges1[i].start,
              end: timestampRanges1[i].end,
            })
            .then((response) => {
              // 请求成功，处理返回的数据finishtimes
              const a2 = response.data.data.完成率;
              this.a2 = a2;
            });
          await axios
            .post("https://punan.hexunetwork.com/xinpanmen/finishtimes", {
              start: timestampRanges1[i].start,
              end: timestampRanges1[i].end,
            })
            .then((response) => {
              const a1 = response.data.data;
              this.a1 = a1;
            });
          //长三角数据
          await axios
            .get(
              "https://punan.hexunetwork.com/xinpanmen/getwujiangfinishcount",
              {
                params: {
                  month: yearMonthArray[i],
                },
              }
            )
            .then((response) => {
              console.log("777", response.data.data);
              this.a3 = response.data.data.count;
              if (this.a3 + this.a1 === 0) {
                this.r1 = 0;
              } else {
                this.r1 =
                  parseFloat(
                    (response.data.data.finished * 100 +
                      this.a2 * this.a1 * 100) /
                      ((this.a3 + this.a1) * 100)
                  ).toFixed(2) * 100;
              }
              console.log("123456", this.a1, this.a2, this.a3, this.r1);
            });
          timestamp1.push(this.a1 + this.a3);
          timestamp2.push(this.r1);
          console.log("12", timestamp1);
        }
        console.log("c", timestamp1, timestamp2);
        console.log(currentDate, year, month, startOfMonth, endOfMonth);
        this.start = startOfMonth;
        this.end = endOfMonth;
        this.option12 = {
          backgroundColor: "transparent",
          color: ["#3fb1e3", "rgb(255, 152, 48)"],
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 16, // 设置图例文字大小
            },
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          grid: {
            top: "18%",
            left: "10%",
            bottom: "10%",
            tooltip: {
              axisPointer: {
                label: {
                  fontSize: 16,
                },
              },
            },
          },
          legend: {
            right: "20%",
            itemWidth: 16,
            itemHeight: 10,
            textStyle: {
              fontSize: 16,
              color: "#ffffff", // 设置图例文字大小
            },
            data: ["事件总数", "完成率%"],
          },
          xAxis: [
            {
              type: "category",
              data: sortedMonths,
              axisPointer: {
                type: "shadow",
              },
              nameTextStyle: {
                fontSize: 16,
              },
              axisLabel: {
                interval: 0,
                fontSize: 16,
                color: "#ffffff", // 设置图例文字大小
              },
              axisTick: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "件",
              min: 0,
              // max: 100,
              interval: 1,
              nameTextStyle: {
                fontSize: 16,
                color: "#ffffff", // 设置图例文字大
                align: "right",
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                },
              },
              axisLabel: {
                hideOverlap: true,
                interval: 0,
                fontSize: 16,
                formatter: "{value} ",
                color: "#ffffff", // 设置图例文字大小
              },
              splitLine: {
                show: false, // 不显示网格线
              },
            },
            {
              type: "value",
              name: "完成率%",
              min: 0,
              // max: 25,
              interval: 5,
              axisLabel: {
                interval: 0,
                fontSize: 16,
                formatter: "{value} %",
                color: "#ffffff",
              },
              show: false,
              nameTextStyle: {
                fontSize: 16,
                color: "#ffffff",
              },
              splitLine: {
                show: false, // 不显示网格线
              },
            },
          ],
          series: [
            {
              name: "事件总数",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value + " 件";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: timestamp1,
            },
            {
              name: "完成率%",
              type: "line",
              yAxisIndex: 1,
              symbolSize: 2, // 设置点的大小为10
              lineStyle: {
                width: 1, // 控制折线的粗细
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + " %";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: timestamp2,
            },
          ],
        };
        this.option3 = {
          backgroundColor: "transparent",
          color: ["#3fb1e3", "rgb(255, 152, 48)"],
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 16, // 设置图例文字大小
            },
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          grid: {
            top: "18%",
            left: "10%",
            bottom: "10%",
            tooltip: {
              axisPointer: {
                label: {
                  fontSize: 16,
                },
              },
            },
          },
          legend: {
            right: "20%",
            itemWidth: 16,
            itemHeight: 10,
            textStyle: {
              fontSize: 16,
              color: "#ffffff", // 设置图例文字大小
            },
            data: ["事件总数", "完成率%"],
          },
          xAxis: [
            {
              type: "category",
              data: sortedMonths,
              axisPointer: {
                type: "shadow",
              },
              nameTextStyle: {
                fontSize: 16,
              },
              axisLabel: {
                interval: 0,
                fontSize: 16,
                color: "#ffffff", // 设置图例文字大小
              },
              axisTick: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "件",
              min: 0,
              // max: 100,
              interval: 1,
              nameTextStyle: {
                fontSize: 16,
                color: "#ffffff", // 设置图例文字大
                align: "right",
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                },
              },
              axisLabel: {
                hideOverlap: true,
                interval: 0,
                fontSize: 16,
                formatter: "{value} ",
                color: "#ffffff", // 设置图例文字大小
              },
              splitLine: {
                show: false, // 不显示网格线
              },
            },
            {
              type: "value",
              name: "完成率%",
              min: 0,
              // max: 25,
              interval: 5,
              axisLabel: {
                interval: 0,
                fontSize: 16,
                formatter: "{value} %",
                color: "#ffffff",
              },
              show: false,
              nameTextStyle: {
                fontSize: 16,
                color: "#ffffff",
              },
              splitLine: {
                show: false, // 不显示网格线
              },
            },
          ],
          series: [
            {
              name: "事件总数",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value + " 件";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: timestamp1,
            },
            {
              name: "完成率%",
              type: "line",
              yAxisIndex: 1,
              symbolSize: 2, // 设置点的大小为10
              lineStyle: {
                width: 1, // 控制折线的粗细
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + " %";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: timestamp2,
            },
          ],
        };
        this.renderChart(); // 渲染图表
      } catch (error) {
        // 错误处理
        console.error(error);
      }
    },
    renderChart() {
      const mychart12 = echarts.init(
        document.getElementById("chart12"),
        "dark"
      ); // 初始化echarts图表
      mychart12.setOption(this.option12); // 设置图表的配置项
      const myChart3 = echarts.init(document.getElementById("chart3"), "dark"); // 初始化echarts图表
      myChart3.setOption(this.option3); // 设置图表的配置项
    },
  },
};
</script>
<style scoped>
.box {
  width: 120rem;
  height: 67.5rem;
  background-image: url("../assets/dataanaly-beijing.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info,
.top-middle,
.right {
  flex: 1;
}
.info {
  display: flex;
  margin-top: 2rem;
  font-size: 1rem;
   
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1rem;
}
.top-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.right {
  position: relative;
}
.exit-button {
  width: 4.6rem;
  height: 2rem;
  position: absolute;
  right: 3rem;
  border: none;
  background: transparent url("../assets/Exit-main.png") no-repeat center;
  /* background-image: url("../assets/Exit-main.png"); */
  background-size: 100% 100%;
}
.exit-button:active {
  background-color: transparent; /* 点击时背景透明 */
  border: none; /* 点击时取消边框 */
}
.custom-button:focus {
  background-color: transparent;
  border: none; /* 鼠标在上面取消边框 */
}
.exit-button:hover {
  background-color: transparent;
  border: none; /* 鼠标在上面取消边框 */
}
.flex-container1 {
  display: flex;
  flex-direction: row;
  width: 52rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
}
.flex-container2 {
  display: flex;
  flex-direction: row;
  margin-left: 3.625rem;
  width: 52rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
}
.top-title {
  width: 25rem;
  height: 2.25rem;
  font-size: 2.25rem;
   
  font-weight: 600;
  color: #ffffff;
  line-height: 2rem;
  background: linear-gradient(0deg, #5677a4 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 1rem;
}
.title {
  margin-left: 0.5rem;
  letter-spacing: 1rem;

  font-size: 3rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.subhead {
  margin-left: 1.2rem;
  letter-spacing: 1.56rem;
  font-size: 1.87rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.comment {
  letter-spacing: 0.3rem;
  font-size: 0.8rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.AI-body {
  padding: 4rem 6rem;
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;
   
  font-weight: 600;
  color: #ffffff;
}
.AI-item {
  display: flex;
  flex-direction: row;
}
.AI-item1 {
  width: 52rem;
}
.AI-item2 {
  margin-left: 3.625rem;
  width: 52rem;
}
.AI-item1-1 {
  width: 20rem;
}
.AI-item1-2 {
  margin-left: 2.5rem;
  width: 29.5rem;
}
.AI-item1-3 {
  margin-left: 3.625rem;
  width: 20rem;
}
.AI-item1-4 {
  margin-left: 2.5rem;
  width: 29.5rem;
}
.AI-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 1rem 1rem;
}
.AI-container-n {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 1rem 1rem;
}
/* .AI-item1-1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  padding: 1rem 1rem;
} */
.AI-number1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11rem;
  height: 5.375rem;
  background: linear-gradient(0deg, #5677a4, rgba(86, 119, 164, 0));
}
.AI-number1 span {
  font-size: 3.5rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 55px 0px 55px rgba(1, 21, 59, 0.4);
}
.flex-AI-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 1rem;
  width: 11.55rem;
  background: transparent url("../assets/dataanaly-item1.png") no-repeat center;
  background-size: 100% 100%;
}
.flex-AI-container2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}
.flex-AI-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-left: 0.5rem;
}
.flex-AI-item2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-left: 0.5rem;
  margin-right: 3.5rem;
}
.flex-AI-text {
  display: flex;
  flex-direction: row;
}
.AI-number {
  font-size: 2rem;
   
  font-weight: 600;
  color: #f2f1f1;
}
.AI-text1 {
  display: flex;
  align-items: flex-end;
  font-size: 2rem;
   
  font-weight: 600;
  color: #f2f1f1;
}
.AI-text2 {
  font-size: 1.1rem;
   
  font-weight: 400;
  color: #88a0bf;
}
.AI-text3 {
  font-size: 2rem;
   
  font-weight: 600;
  color: #f2f1f1;
}
/*  */
.bar-chart {
  display: flex;
  justify-content: space-between;
  height: 253px;
  padding: 10px;
}
.bar-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}
.bar {
  width: 50px;
  border-radius: 5px;
}
.cht-ana2 {
  margin-left: 2rem;
  flex-grow: 1;
  width: 45rem;
  height: 10rem;
}
.chart2 {
  width: 45rem;
  height: 10rem;
}
.cht-ana4 {
  margin-left: 2rem;
  flex-grow: 1;
  width: 50rem;
  height: 10rem;
}
.chart4 {
  width: 45rem;
  height: 10rem;
}
.AI-cht1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  height: 10rem;
}
.cht-1 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第一名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-2 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第二名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-3 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第三名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-4 {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffd9ad;
}
.return {
  display: flex;
  text-align: center;
  align-items: center;
  height: 2.8125rem;
  width: 18.4375rem;
  background-image: url("../assets/返回.png");
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 1.2rem;
   
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-top: 1.5rem;
  margin-left: 89rem;
}
.return span {
  margin-left: 8rem;
}
.cht3 {
  width: 52rem;
  height: 16rem;
  /* border: 0.08rem solid rgba(255, 255, 255, 0.575); */
}
.chart3 {
  width: 52rem;
  height: 16rem;
}
.cht1 {
  width: 52rem;
  height: 16rem;
  /* border: 0.08rem solid rgba(255, 255, 255, 0.575); */
}
.chart12 {
  width: 52rem;
  height: 16rem;
}
</style>